<template>
  <div class="Roles">
    <router-view></router-view>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="font-size: 16px"
    >
      <el-breadcrumb-item :to="{ path: '/console' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>用户反馈</el-breadcrumb-item>
    </el-breadcrumb>
    <br /><br />
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type" effect="dark" size="mini">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户" width="180">
        </el-table-column>
        <el-table-column prop="address" label="反馈内容"> </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column width="200">
          <template >
            <div class="operation_show">
              <el-button
                type="primary"
                @click="adviceDialog = true"
                icon="el-icon-edit"
                size="small"
                circle
                plain
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 反馈对话框 -->
    <el-dialog
      title="反馈处理"
      :visible.sync="adviceDialog"
      center
      class="adviceDialog"
    >
      <el-input
        placeholder="请输入内容"
        type="textarea"
        v-model="suggest"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adviceDialog = false">取 消</el-button>
        <el-button type="primary" @click="reply">发 送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2022-05-02",
          name: "student",
          type: "success",
          status: "已处理",
          address: "题库没办法访问",
        },
        {
          date: "2022-05-04",
          name: "teacher",
          type: "error",
          status: "未处理",
          address: "题库显示异常",
        },
        {
          date: "2022-05-01",
          name: "student",
          type: "success",
          status: "已处理",
          address: "个人文件无法加载",
        },
        {
          date: "2022-05-03",
          name: "student",
          type: "error",
          status: "未处理",
          address: "回收站文件消失",
        },
      ],
      form:{

      },
      adviceDialog: false,
    };
  },
  mounted() {
    this.$http.post(`${this.systemURL}/advice/list`,this.form).then( res =>{
      console.log(res);
      // this.tableData = res.data.data 
    })
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    reply() {
      this.adviceDialog = true

    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
